<template>
  <div class="phone-panel animated" :prize="prize" :class="{bounceIn:prize.show,fadeOutUp:!prize.show}">
    <div class="container">
      <ul>
        <li class="xiaobozhe">{{myprize.name}}</li>
        <!-- <li>
          <label for="" class="xiaobozhe">手机号：</label><input type="number" pattern="[0-9]*" v-model="uphone" value="uphone"></li> -->
        <li class="tip">{{myprize.tip}}</li>
        <li>
          <p :class="btnName"></p>
        </li>
      </ul>
      <img class="alert-left" :src="alertl" alt="">
      <img class="alert-right" :src="alertr" alt="">
    </div>
    <img class="close" :src="closeBtn" @click="closePanel()" alt="">
  </div>
</template>
 <script>
import {
  getServerHost, GetRequest, checkMobile
}
  from '../../assets/lib/tool'

export default {
  data() {
    return {
      uphone: "",
      alertl: require('@/assets/img/alert_left.png'),
      alertr: require('@/assets/img/alert_right.png'),
      closeBtn: require('@/assets/img/close.png'),
      myprize: '',
      prizeInfo: [{
        type: 'sharenotimes', //分享后次数用完了
        name: '本周抽奖机会已用完，下周再来吧！奖品每周上新哦！',
        tip: ''
      },
      {
        type: 'notimes',//次数用完了
        name: '将活动分享至朋友圈或好友群，邀请好友助力，每周获得2次额外抽奖机会哦！',
        tip: ''
      }, {
        type: 'type1',
        name: '恭喜您抽中了',
        tip: '话费将于3个工作日内到账哦~'
      }, {
        type: 'type2', //电子券
        name: '恭喜您抽中了',
        tip: '电子券将在3个工作日内到账，可在公众号菜单“抽奖福利”中无门槛使用电子券'
      }, {
        type: 'type3',
        name: '恭喜您抽中了',
        tip: ''
      }, {
        type: 'type4',
        name: '恭喜您抽中了',
        tip: '请点击以下链接领取：'
      }
      ],
      btnName: {
        btnqd: true,
        btnrc: false
      }
    }
  },
  props: ['prizeName', 'prize'],
  mounted() {
    this.$nextTick(() => {
      this.prizeInfo.map(items => {
        if (items.type == this.prize.data.info) {
          items.name = items.name + this.prize.data.name;
          this.myprize = items;
        }
      })


    })
  },
  methods: {
    //关闭弹窗
    closePanel() {
      this.prize.show = false;
    },
    returnToMain() {
      this.$emit('closePanel', 1)
    },
    acceptThePrizeFunc() {
      if (!checkMobile(this.uphone)) {
        alert('请输入11位手机号');
        return;
      }

    }
  }
};
</script>
  <style lang="less" scoped>
.phone-panel {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;

  .tip {
    margin-bottom: 40px;
  }
  .close {
    position: relative;
    top: 200px;
    width: 70px;
  }
  .alert-left {
    position: absolute;
    left: -48px;
    top: 28px;
    width: 25%;
  }
  .alert-right {
    position: absolute;
    right: -48px;
    bottom: 28px;
    width: 25%;
  }
  .container {
    position: relative;
    top: 15%;
    margin: 0 auto;
    width: 519px;
    min-height: 422px;
    padding-bottom: 80px;
    background: url("../../assets/img/panel-c.png") no-repeat;
    background-size: 100% 100%;
    ul {
      padding: 0 25px;
      color: #fff;
      li {
        width: 100%;
        text-align: center;
      }
      li:first-child {
        padding-top: 114px;
        font-weight: bold;
        color: #fecb4b;
        font-size: 32px;
        line-height: 1.5em;
        span {
          color: #e7a8ff;
        }
      }
      .tip {
        margin-top: 30px;
        font-size: 24px;
        line-height: 1.5em;
        padding: 0 85px;
        label {
          display: inline-block;
          width: 130px;
        }
        input {
          padding-left: 20px;
          width: 263px;
          height: 63px;
          border-radius: 30px; /*no*/
        }
      }
      li {
        padding: 10px 0;
        .btnqd {
          margin: 0 auto;
          width: 359px;
          height: 80px;
          background: url("../../assets/img/alertbtn.png") no-repeat;
          background-size: 359px 80px;
        }
        .btnrc {
          margin: 0 auto;
          width: 359px;
          height: 80px;
          background: url("../../assets/img/btnss.png") no-repeat;
          background-size: 359px 80px;
        }
      }
    }
  }
}
</style>
  